<template>
  <span class="encryptBox">
		<span>
    <slot :show="show" :encryptPhone="encryptPhoneComp" :encryptName="encryptNameComp" />
		</span>
		<image @click="change" class="encryptBox-icon" :src="`/uni_modules/d2vp-encrypt/components/d2-encrypt/${show ? 'eye-on.png' : 'eye-off.png'}`"></image>
  </span>
</template>
<script>

export default {
	data() {
		return {
			show: false,
		}
	},
	computed: {
		encryptPhoneComp() {
			return (data) => this.show ? data : this.encryptPhone(data)
		},
		encryptNameComp() {
			return (data) => this.show ? data : this.encryptName(data)
		},
	},
	methods: {
		change() {
			this.show = !this.show
			this.$emit('change', this.show)
		},
		
		encryptPhone(mobile) {
		  if (!mobile) {
		    return ''
		  }
		  if (typeof mobile !== 'string') {
		    mobile = mobile + ''
		  }
		  else if (mobile.length >= 11) {
		    return mobile.replace(/(.{3})\d*(\d{4})/, "$1****$2")
		  }
		  // 非11位手机仅展示后4位
		  else if (mobile.length > 4 && mobile.length < 11) {
		    return mobile.replace(/\d*(\d{4})/, "****$1")
		  }
		  // 小于4位不做处理
		  return mobile
		},
		
		// encryptName('张三三三')
		// 张**三
		encryptName(name) {
		  if (!name || name.length <= 1) {
		    return name;
		  }
		  // 获取名字的第一个字符
		  const firstChar = name[0];
		  // 获取名字的最后一个字符
		  let lastChar = name[name.length - 1];
		  let stars = '*'.repeat(name.length - 2);
		  if (name.length === 2) {
		    lastChar = '*'
		    stars = ''
		  }
		  // 返回加密后的新字符串
		  return firstChar + stars + lastChar;
		}
	},

}
</script>
<style lang="scss" scoped>
.encryptBox {
	display: inline-flex;
	word-wrap: break-word;
	word-break: break-all;
}

.encryptBox-icon {
	margin-left: 4px;
	cursor: pointer;
	vertical-align: text-top;
	width: var(--iconSize, 1em);
	height: var(--iconSize, 1em);
	vertical-align: text-top;
	margin-top: 2px;
}
</style>
